<template>
  <div>
    <div class="search">
      <el-form :inline="true" :model="searchData" size="small">
        <el-form-item label="">
          <el-button type="primary" icon="el-icon-plus" @click="btnShowForm('add')">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" fit highlight-current-row>
      <el-table-column label="标题" prop="title" align="center" />
      <el-table-column label="状态" prop="jobStatus" align="center" width="200" />
      <el-table-column label="Uri" prop="uri" align="center" />
      <el-table-column label="创建人" prop="creator" align="center"  />
      <el-table-column label="频率" prop="creator" align="center"  />
      <el-table-column label="最近监测时间" prop="creator" align="center"  />
      
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button size="small" class="blackStyle" type="text"  @click="btnShowForm('edit',scope.row)">修改</el-button>
          <el-button size="small" class="blackStyle" type="text"  @click="deleteItem(scope.row.id)">启用</el-button>
          <el-button size="small" class="blackStyle" type="text"  @click="deleteItem(scope.row.id)">删除</el-button>
          <el-button size="small" class="blackStyle" type="text"  @click="deleteItem(scope.row.id)">日志</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="currentChange" :page-size="searchData.pageSize" :total="totalCount" style="float: right; margin-top: 10px;" background
      layout="prev, pager, next">
    </el-pagination>
    <el-dialog :title="(formDialog.type=='add'?'新增':'编辑')+ `管理员`" :visible.sync="formDialog.show" width="40%">
      <el-form :model="form" class="demo-form-inline">
        <el-form-item label="帐号" label-width="80px">
          <el-input v-model="form.loginCode" placeholder="帐号" clearable :readonly="formDialog.type=='edit'" />
        </el-form-item>
        <el-form-item label="密码" label-width="80px" :hidden="formDialog.type=='edit'">
          <el-input show-password v-model="form.password" placeholder="密码" clearable />
        </el-form-item>
        <el-form-item label="昵称" label-width="80px">
          <el-input v-model="form.userName" placeholder="昵称" clearable />
        </el-form-item>
        <el-form-item label="备注" label-width="80px">
          <el-input v-model="form.remark" placeholder="备注" clearable />
        </el-form-item>
        <el-form-item label="角色" label-width="80px">
          <el-select v-model="form.roleId" filterable placeholder="请选择">
            <el-option v-for="item in listRole" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <!-- <el-input v-model="form.roleId" placeholder="角色" clearable /> -->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit" v-loading="formDialog.loading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      list: null,
      listLoading: false,
      searchData: {
        pageIndex: 1,
        pageSize: 10,
      },
      totalCount: 0,
      form: {},
      formDialog: {
        title: '新增角色',
        show: false,
        type: 'add',
        loading: false,
      },
      listRole:[]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      let that = this
      that.listLoading = true
      that.$system
        .get('healthcheck/get', this.searchData)
        .then((res) => {
          this.list = res.list
          this.totalCount = res.totalCount
        })
        .catch((res) => {})
        .finally(() => {
          that.listLoading = false
        })
    },
    deleteItem(_id) {
      this.$confirm('确定删除该数据?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.listLoading = true
          this.$system
            .delete('manager/delete', { id: _id })
            .then((res) => {
              this.$tip.success()
              this.getList()
            })
            .catch(() => {})
            .finally(() => {
              this.listLoading = false
            })
        })
        .catch(() => {})
    },
    btnShowForm(type, item) {
      this.formDialog.type = type
      this.form = {}
      this.formDialog.show = true
      if (this.formDialog.type === 'edit') {
        this.form = item
        this.GetMenuByRoleId(item.id)
      }
    },
    currentChange(val) {
      this.searchData.pageIndex = val
      this.getList()
    },
    submit() {
      // debugger
      let that = this
      this.formDialog.loading = true
      if (that.formDialog.type == 'edit') {
        this.$system
          .put('manager/update', that.form)
          .then((res) => {
            this.$tip.success()
            that.formDialog.show = false
            that.getList()
          })
          .catch()
          .finally(() => {
            this.formDialog.loading = false
          })
      } else {
        this.$system
          .post('manager/add', that.form)
          .then((res) => {
            this.$tip.success()
            that.formDialog.show = false
            that.getList()
          })
          .catch()
          .finally(() => {
            this.formDialog.loading = false
          })
      }
    },

  },
}
</script>
  